<section id="auditCreate">
    <div class="hi-edit-title">退租管理 — 新建</div>
    <section class="plr-24 ">
        <!-- 基本信息 -->
        <section class="he-basic-mes-container  border-b">
            <h3 class="he-title">基本信息</h3>
            <div class="row line-height-34">
                <div class="col-xs-2 hr-basic-width">退租时间：</div>
                <div class="col-md-3">
                    <web-calendar type="primary" v-model="tzDate" tips="请选择日期" @on-change="getWithdrawDate">
                    </web-calendar>
                </div>
            </div>
            <div class="row line-height-34">
                <div class="col-xs-2 hr-basic-width">合同编号：</div>
                <div class="col-xs-4"><a href="javascript:; " @click="goToContractDeatail">{{contratdata.cCode ||
                    '--'}}</a></div>
                <div class="col-xs-2 hr-basic-width">管理编号：</div>
                <div class="col-xs-4"><a href="javascript:;" @click="goToContractDeatail">{{contratdata.mCode}}</a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-2 hr-basic-width">合同名称：</div>
                <div class="col-xs-10">
                    {{contratdata.contractName ? contratdata.contractName : '--'}}
                </div>
            </div>
            <div class="row line-height-34">
                <div class="col-xs-2 hr-basic-width">租户名称：</div>
                <div class="col-xs-10">{{contratdata.zlfCompany}}</div>
            </div>
        </section>
        <!-- 出租资源 -->
        <div class="rent-resource">
            <h3 class="he-title">出租资源</h3>
            <!-- 单元 -->
            <div v-if="building.length">
                <div class="clearfix line-height-34">
                    <div class="pull-left">单元<span>({{Number(totalArea).toFixed(2)}}m²)</span></div>
                    <div class="pull-right cursor" @click="checkDetailMes('unit')">
                        <span style="color:#337ab7" v-if="!unitOpenFlag">展开详情</span>
                        <span style="color:#337ab7" v-if="unitOpenFlag">收起详情</span>
                        <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!unitOpenFlag">
                        <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="unitOpenFlag">
                    </div>
                </div>
                <div class="unit-table" v-if="unitOpenFlag">
                    <div class="tb-title dy-flex border-b gradient-color">
                        <div class="dy-fx-2">项目</div>
                        <div class="dy-fx-2">楼栋</div>
                        <div class="dy-fx-1">楼层</div>
                        <div class="dy-fx-4">单元</div>
                    </div>
                    <div class="tb-content">
                        <ul class="dy-flex project-cr">
                            <li class="dy-fx-2 project">{{contratdata.projectName}}</li>
                            <li class="dy-fx-7">
                                <!-- 楼栋 -->
                                <ul class="dy-flex building-cr" v-for="(item,index) in building">
                                    <li class="dy-fx-2 building">{{item.buildingName}}</li>
                                    <li class="dy-fx-5">
                                        <!-- 楼层 -->
                                        <ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
                                            <li class="dy-fx-1 floor">{{item1.floorName}}</li>
                                            <li class="dy-fx-4 unit">
                                                <!-- 单元 -->
                                                <b v-for="(item2,index2) in item1.unit" style="float:left">{{item2}}<i
                                                        v-if="index2 + 1 !== item1.unit.length">、</i></b>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 工位 -->
            <div v-if="wp.length">
                <div class="clearfix line-height-34">
                    <div class="pull-left">工位<span>({{wpTotalNum}}个)</span></div>
                    <div class="pull-right cursor" @click="checkDetailMes('wp')">
                        <span style="color:#337ab7" v-if="!wpOpenFlag">展开详情</span>
                        <span style="color:#337ab7" v-if="wpOpenFlag">收起详情</span>
                        <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!wpOpenFlag">
                        <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="wpOpenFlag">
                    </div>
                </div>
                <div class="position-table border" v-if="wpOpenFlag">
                    <div class="tb-title dy-flex border-b gradient-color">
                        <div class="dy-fx-3">项目</div>
                        <div class="dy-fx-3">楼栋</div>
                        <div class="dy-fx-1">楼层</div>
                        <div class="dy-fx-1">单元</div>
                        <div class="dy-fx-1">工位数</div>
                        <div class="position-item">工位</div>
                    </div>
                    <ul class="tb-content">
                        <li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId"
                            :floorId="item.floorId" :unitId="item.unitId">
                            <div class="dy-fx-3">{{contratdata.projectName}}</div>
                            <div class="dy-fx-3">{{item.buildingName}}</div>
                            <div class="dy-fx-1">{{item.floorName}}</div>
                            <div class="dy-fx-1">{{item.unitName}}</div>
                            <div class="dy-fx-1">{{item.num}}</div>
                            <div class="position-item">
                                <span class="position">
                                    <b v-for="(item1,index1) in item.positions"
                                        style="float:left">{{item1.positionName}}<i
                                            v-if="index1 + 1 !== item.positions.length">、</i></b>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 车位 -->
            <div v-if="st.length">
                <div class="clearfix line-height-34">
                    <div class="pull-left">车位<span>({{stTotalNum}}个)</span></div>
                    <div class="pull-right cursor" @click="checkDetailMes('st')">
                        <span style="color:#337ab7" v-if="!stOpenFlag">展开详情</span>
                        <span style="color:#337ab7" v-if="stOpenFlag">收起详情</span>
                        <img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!stOpenFlag">
                        <img class="bill-open-image" src="assets/images/down.png" alt="" v-if="stOpenFlag">
                    </div>
                </div>
                <div class="position-table border" v-if="stOpenFlag">
                    <div class="tb-title dy-flex border-b gradient-color">
                        <div class="dy-fx-3">项目</div>
                        <div class="dy-fx-3">楼栋</div>
                        <div class="dy-fx-1">楼层</div>
                        <div class="dy-fx-1">单元</div>
                        <div class="dy-fx-1">车位数</div>
                        <div class="position-item">车位</div>
                    </div>
                    <ul class="tb-content">
                        <li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId"
                            :floorId="item.floorId" :unitId="item.unitId">
                            <div class="dy-fx-3">{{contratdata.projectName}}</div>
                            <div class="dy-fx-3">{{item.buildingName}}</div>
                            <div class="dy-fx-1">{{item.floorName}}</div>
                            <div class="dy-fx-1">{{item.unitName}}</div>
                            <div class="dy-fx-1">{{item.num}}</div>
                            <div class="position-item">
                                <span class="position">
                                    <b v-for="(item1,index1) in item.positions"
                                        style="float:left">{{item1.positionName}}<i
                                            v-if="index1 + 1 !== item.positions.length">、</i></b>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 冲突账单确认 -->
        <div class="rent-resource" v-if="tzDate">
            <h3 class="he-title mb-10">冲突账单确认</h3>
            <div v-if="conflictBills.length">
                <div style="color:#ec4151">此次退租（{{tzDate}}）影响了以下账单</div>
                <div class="mb-10">注：{{tzDate}}之后的尚未收款的账单直接作废，不显示在下表</div>
                <div></div>
                <div class="unit-table">
                    <div class="tb-title dy-flex border-b gradient-color">
                        <div class="dy-fx-1">账单编号</div>
                        <div class="dy-fx-3">退租前</div>
                        <div class="dy-fx-3">退租后</div>
                    </div>
                    <div class="tb-content-plus">
                        <ul class="dy-flex border-b" v-for="item in conflictBills">
                            <li class="dy-fx-1 border-r" style="align-items: center;justify-content: center;">
                                {{item.billNo}}
                            </li>
                            <li class="dy-fx-3 border-r rentClass">
                                <section v-for="(single,one) in item.expenses" v-if="single.amount">
                                    <div v-if="!one">
                                        <div>
                                            <p class="table-gray-title">账单周期</p>
                                        </div>
                                        <span>{{item.beginDate | formatDate}}至{{item.endDate | formatDate}}</span>
                                    </div>
                                    <div class="dy-flex" style="flex-direction: column;">
                                        <div>
                                            <p class="table-gray-title mt-10">{{single.expenseName}}</p>
                                        </div>
                                        <span>应收金额：{{single.amount.amountReceive || '--'}}元</span>
                                        <span>已收金额：{{single.amount.amountPayed || '--'}}元
                                            <span style="color:#ec4151" v-if="single.amount.amountRefund > 0">（应退：{{single.amount.amountRefund}}元）</span>
                                        </span>
                                        <span>减免金额：{{single.amount.derateExpense || '--'}}元</span>
                                        <span>结转金额：{{single.amount.carryOverAmount || '--'}}元</span>
                                    </div>
                                </section>
                                <section v-if="!item.expenses[0].amount" class="invalidCalss">作废</section>
                            </li>
                            <li class="dy-fx-3 rentClass">
                                <section v-for="(single,one) in item.expenses" v-if="single.withdrawAmount">
                                    <div v-if="!one">
                                        <div>
                                            <p class="table-gray-title">账单周期</p>
                                        </div>
                                        <span
                                            class="color-orange">{{item.withdrawBeginDate | formatDate}}至{{item.withdrawEndDate | formatDate}}</span>
                                    </div>
                                    <div v-if="single.withdrawAmount" class="dy-flex" style="flex-direction: column;">
                                        <div>
                                            <p class="table-gray-title mt-10">{{single.expenseName}}</p>
                                        </div>
                                        <span>应收金额：{{single.withdrawAmount.amountReceive || '--'}}元</span>
                                        <span>已收金额：{{single.withdrawAmount.amountPayed || '--'}}元<span
                                                style="color:#ec4151"
                                                v-if="single.withdrawAmount.amountRefund > 0">（应退：{{single.withdrawAmount.amountRefund}}元）</span></span>
                                        <span>减免金额：{{single.withdrawAmount.derateExpense || '--'}}元</span>
                                        <span>结转金额：{{single.withdrawAmount.carryOverAmount || '--'}}元</span>
                                    </div>
                                </section>
                                <section v-if="!item.expenses[0].withdrawAmount" class="invalidCalss">作废</section>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="text-align: center;" v-else>本次退租无账单需要确认</div>
        </div>
        <!--应收费用-->
        <section class="ptb-10">
            <div class="title-withdraw bg-f7f7f7 mb-10"
                style="margin-left:-24px; margin-right:-24px; padding-left:24px;">
                <h3 class="he-title inline pr-12">应收部分</h3>
                <span class="color-primary" v-if="timeDate">截止退租时间共有
                    <a href="#/billList?ddtab=true" target="_blank" @click="pageName(contratdata.zlfCompany)"
                        class="color-orange mlr-3">{{wfMoney}}个账单</a>未付清
                </span>
            </div>
            <div class="he-receivable-container">
                <!--应收部分费项-->
                <!--自动累加费用-->
                <div class="mb-10" v-for="(item,index) in receiveData">
                    <div class="row">
                        <div class="col-xs-2 line-height-34">{{item.expense_name}}：</div>
                        <div class="col-xs-3 row">
                            <div class="col-xs-11">
                                <input type="text" class="form-control" placeholder="金额" v-model="item.amount"
                                    @blur="ValDataNumber(index, item.amount)">
                            </div>
                            <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
                        </div>
                        <div class="col-xs-4">
                            <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo">
                        </div>
                        <div class="col-xs-1 pl-0">
                            <span class="icon-Gm-delete font-18 line-height-34 color-c9c9c9"
                                @click="del(receiveData,index)" v-show="item.isShow"></span>
                        </div>
                    </div>
                </div>
                <div class="mb-10" v-for="(item,index) in chargeData">
                    <div class="row">
                        <div class="col-xs-2 line-height-34">
                            <input type="text" class="form-control js-cy-name-ipt" v-model="item.expense_name"
                                autocomplete="off" :value="item.expense_name"
                                @input="matchReceiveExpense(item.expense_name,index)">

                            <ul class="hi-expense-match bg-fff border z-998 line-height-34" v-show="isReceiveMatch">
                                <li v-for="(item,index) in matchData"
                                    @click="selectedReceiveExpense(item.expenseName,item.type)">
                                    {{item.expenseName}}
                                </li>
                            </ul>
                        </div>
                        <div class="col-xs-3 row">
                            <div class="col-xs-11">
                                <input type="text" class="form-control" placeholder="金额" v-model="item.amount"
                                    @focus="hideMatchReceiveExpense">
                            </div>
                            <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
                        </div>
                        <div class="col-xs-4">
                            <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo">
                        </div>
                        <div class="col-xs-1 pl-0">
                            <span class="hl-icon icon-Gm-cancel font-18 line-height-34 mr-5 mb-20 cursor"
                                @click="del(chargeData,index)"></span>
                            <span class="hl-icon icon-Gm-confirm font-18 line-height-34 cursor"
                                @click="addReceive(index)"></span></div>
                    </div>
                </div>
                <!--隐藏添加项目-->
                <div class="clearfix color-primary line-height-34">
                    <div class="pull-left hl-icon icon-Org-account font-18 line-height-34 pr-12 cursor"
                        @click="pushReceive('RC')"></div>
                    <div class="pull-left cursor" @click="pushReceive('RC')">添加费用</div>
                </div>

                <div class="color-primary line-height-34 ">
                    <span class="pr-12">应收合计：</span>
                    <span>{{ chargeTotal | formatNum }}</span>元
                </div>
            </div>
        </section>
        <!--应退费用-->
        <section class="border-b pb-10">
            <div class="title-withdraw bg-f7f7f7 mb-10"
                style="margin-left:-24px; margin-right:-24px; padding-left:24px;">
                <h3 class="he-title inline pr-12">应退部分</h3>
                <span class="color-primary" v-if="timeDate">截止退租时间共有
                    <a href="#/billList?ddtab=true" target="_blank" @click="pageName(contratdata.zlfCompany)"
                        class="color-orange mlr-3">{{yfMoney}}个账单</a>已付应退
                </span>
            </div>
            <div class="he-recoverable-container">
                <!--应退部分费项-->
                <div class="mb-10" v-for="(item,index) in refundData">
                    <div class="row">
                        <div class="col-xs-2 line-height-34">{{item.expense_name}}:</div>
                        <div class="col-xs-3 row">
                            <div class="col-xs-11">
                                <input type="text" class="form-control" placeholder="金额" v-model="item.amount"
                                    @blur="ValDataNumber(index, item.amount)">
                            </div>
                            <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
                        </div>
                        <div class="col-xs-4">
                            <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo">
                        </div>
                        <div class="col-xs-1 pl-0">
                            <span class="icon-Gm-delete font-18 line-height-34 color-c9c9c9"
                                @click="del(refundData,index)" v-show="item.isShow"></span>
                        </div>
                    </div>
                </div>
                <div class="mb-10" v-for="(item,index) in paymentData">
                    <div class="row">
                        <div class="col-xs-2 line-height-34">
                            <input type="text" class="form-control js-cy-name-ipt refund-name"
                                v-model="item.expense_name" autocomplete="off" :value="item.expense_name"
                                @input="matchRefundExpense(item.expense_name,index)">
                            <ul class="hi-expense-match bg-fff border z-998 line-height-34" v-show="isRefundMatch">
                                <li v-for="(item,index) in matchData"
                                    @click="selectedRefundExpense(item.expenseName,item.type)">
                                    {{item.expenseName}}
                                </li>
                            </ul>
                        </div>
                        <div class="col-xs-3 row">
                            <div class="col-xs-11">
                                <input type="text" class="form-control" placeholder="金额" v-model="item.amount"
                                    @focus="hideMatchRefundExpense">
                            </div>
                            <div class="col-xs-1 line-height-34 plr-0 text-center">元</div>
                        </div>
                        <div class="col-xs-4">
                            <input placeholder="备注(选填)" type="text" class="form-control" v-model="item.memo"
                                @focus="hideMatchRefundExpense">
                        </div>
                        <div class="col-xs-1 pl-0">
                            <span class="hl-icon icon-Gm-cancel font-18 line-height-34 mr-5 mb-20 cursor"
                                @click="del(paymentData,index)"></span>
                            <span class="hl-icon icon-Gm-confirm font-18 line-height-34 cursor"
                                @click="addRefund(index)"></span></div>
                    </div>
                </div>
                <div class="clearfix color-primary line-height-34">

                    <div class="pull-left hl-icon icon-Org-account font-18 line-height-34 pr-12 cursor"
                        @click="pushRefund('RF')"></div>
                    <div class="pull-left cursor" @click="pushRefund('RF')">添加费用</div>

                </div>
                <div class="color-primary line-height-34">
                    <span class="pr-12">应退合计：</span>
                    <span>{{ paymentTotal | formatNum }}</span>元
                </div>
            </div>
        </section>
        <!--费用合计-->
        <section class="border-b pb-10">
            <h3 class="he-title">费用合计</h3>
            <div class="color-blue line-height-34">
                <span class="pr-12">费用合计：</span>
                <span>{{ total }}</span>
            </div>
        </section>
        <section class="border-b pb-10">
            <h3 class="he-title">退租原因</h3>
            <ul class="he-hire-reason clearfix mb-10">
                <li :rel=' item.rel ' :class="item.className" v-for="(item,index) in checkBoxList"
                    @click="checkBoxActive(index)">{{ item.name }}
                </li>
            </ul>
        </section>
        <section class="border-b pb-10">
            <h3 class="he-title">待办事项</h3>
            <ul class="he-deal-thing mb-10">
                <li class="mb-10" v-for="(item,index) in todoList">
                    <span>{{index + 1}}</span>
                    <i class="pr-5">、</i>
                    <span class="pr-12">{{item}}</span>
                    <span class="icon-Gm-delete color-c9c9c9 cursor" @click="delTodoItem(index)"></span>
                </li>
            </ul>
            <!-- 添加 -->
            <div class="clearfix line-height-34" v-for="(item,index) in newTodoList">
                <div class="pull-left">{{todoList.length + index + 1}}</div>
                <div class="pull-left pr-12">、</div>
                <input type="text" class="form-control pull-left he-deal-thing-ipt mr-16" :value="item"
                    v-model="newTodoList[index]" autocomplete="off">
                <span class="pull-left hl-icon icon-Gm-cancel line-height-34 font-18 mr-5 cursor"
                    @click="cancelTodoIpt(index)">
                </span>
                <span class="pull-left hl-icon icon-Gm-confirm line-height-34 font-18 cursor"
                    @click="addTodoItem(index)">
                </span>
            </div>
            <div class="clearfix color-primary line-height-34">
                <span class="pull-left hl-icon icon-Org-account line-height-34 font-18 pr-12 cursor"
                    @click="showTodoIpt">
                </span>
                <span class="pull-left cursor" @click="showTodoIpt">添加</span>
            </div>
        </section>
        <section class="border-b pb-10">
            <!--szd分支-->
            <h3 class="he-title">存档图片</h3>
            <ul class="he-image clearfix mb-10">
                <li class="active" v-for="(item,index) in pics">
                    <img :src="item" alt="" @click="showBigImage(index)">
                    <div @click="delImage(index)">删除</div>
                </li>
                <li class="upload-image" v-show="pics.length < 5"></li>
            </ul>
            <div class="color-999">建议上传大小不超过2M的JPG或PNG格式图片，最多上传5张</div>
        </section>

        <!-- 相关文件 -->
        <section>
            <!-- icon-Nav-contract-file -->
            <h3 class="he-title">相关文件</h3>
            <div class="flexbox">
                <div style="width:92px;padding-left:5px;">文件列表：</div>
                <hl-button @on-click="uploadFile">上传文件</hl-button>
            </div>
            <ul class="fileList">
                <li v-for="(item,index) in fileList" style="margin:0 80px 10px 0">
                    <span class="icon-Nav-contract-file"></span>
                    <span class="fileName">{{item.name}}</span>
                    <span class="icon-Gm-delete-2" @click="delFileItem(index)"></span>
                </li>
            </ul>
            <div class="sperate-line"></div>
        </section>



        <section class="mb-10">
            <h3 class="he-title">备注</h3>
            <textarea placeholder="内容不超过500字" class="form-control mb-10 " name="" id="" cols="30" rows="3"
                v-model=" memo "></textarea>
            <button class="btn n-btn-primary mr-10" @click="checkWithout('save')">保存</button>
            <button class="btn n-btn-outline js-access-control" @click="checkWithout('submit')" data-control="c57">提交审核
            </button>
        </section>
    </section>

    <!--提交审核确认-->
    <div class="hllayer-view pop box-o-shadow withdraw-confirm-layer" v-show="isShowSubmitConfirm">
        <div class="head-pop font-16"><span>提交退租</span>
            <button class="fw-close absolute close" type="button" @click="closeSubmitConfirmLayer">×</button>
        </div>
        <div class="content-pop">
            <div class="clearfix">
                <div class="title">正在提交：</div>
                <div class="main">{{contratdata.zlfCompany}}的退租申请</div>
            </div>
            <div class="clearfix">
                <div class="title">退租时间：</div>
                <div class="main">{{withdrawDate}}</div>
            </div>
            <div class="clearfix">
                <div class="title">费用合计：</div>
                <div class="main">{{total}}</div>
            </div>
        </div>
        <div class="fw-button">
            <button type="button" class="fw-submit yes" @click="confirmSubmitWithdraw">确定提交</button>
            <button type="button" class="fw-submit no" @click="closeSubmitConfirmLayer">返回修改</button>
        </div>
    </div>
    <div class="hllayer-mask" v-show="isShowSubmitConfirm"></div>
    <div class="upload-file-button"></div>
    <div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
    <web-costitem :show="flag" @query="queryExpenditure" :flowtype="flowtype" permissions="true"></web-costitem>
</section>
<script src="modules/bill/scripts/costItem.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/contract/scripts/contract_public.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/withdraw/scripts/withdraw_create.js"></script>
<style>
    .loadprogress {
        position: fixed;
        z-index: 999999;
        left: 0;
        bottom: 0;
        height: 20px;
        width: 500px;
        font-size: 12px;
        text-indent: 3px;
        line-height: 20px;
    }

    .flexbox {
        display: flex;
        justify-content: space-between;
    }

    .fileName {
        margin: 0 10px;
    }

    .fileList {
        display: flex;
        flex-wrap: wrap;
    }

    .tb-content-plus li {
        min-height: 40px;
        display: flex;
        padding: 10px;
    }

    .rentClass {
        flex-direction: column;
        align-items: flex-start;
    }

    .rentClass>div {
        display: flex;
        flex-direction: column;
    }

    .rentClass>div div {
        margin-bottom: 10px;
        font-weight: 600;
        font-size: 14px;
    }

    .rentClass>div span {
        margin-bottom: 10px;
    }

    .invalidCalss {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: red;
    }

    .table-gray-title {
        line-height: 30px;
        padding: 0 15px;
        background: rgba(240, 240, 240, 1);
        border-radius: 2px;
        display: inline-block;
        margin-bottom: 10px;
    }
</style>